<template>
  <div id="rpg" class="bg">
    <div class="sun"></div>
    <sprite
      @moveEnd="boyMoveEnd"
      :action="true"
      class="boy"
      :spriteObj="boy"
    ></sprite>
    <sprite
      @moveEnd="girlMoveEnd"
      :action="girlAction"
      class="girl"
      :spriteObj="girl"
    ></sprite>
    <dialog-box
      @close="dialogClose"
      v-if="isShow"
      :dialogueArr="dialogueArr"
    ></dialog-box>
    <typed v-if="typedShow" @completeOver="completeOver"></typed>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import DialogBox from "./components/dialogBox/index.vue";
import Sprite from "./components/sprite/index.vue";
import Typed from "./components/typed/index.vue";

// 剧本
const dialogueContent = [
  {
    avatar: "/images/rpg_male.png",
    content: "二牛：嫦娥你终于肯和我约会了, 哈哈",
  },
  {
    avatar: "/images/rpg_female.png",
    content: "嫦娥：二牛对不起，我是从月宫来的，我不能和人间的你在一起!",
  },
  {
    avatar: "/images/rpg_female.png",
    content:
      "嫦娥：今天是中秋节，我只有今天这个机会可以重新回月宫",
  },
  {
    avatar: "/images/rpg_female.png",
    content:
      "嫦娥：回月宫的条件是找到真心人，让他念起咒语，我才能飞升!",
  },
  {
    avatar: "/images/rpg_female.png",
    content: "嫦娥：而你就是我的真心人，你可以帮我嘛？",
  },
  {
    avatar: "/images/rpg_male.png",
    content: "二牛：好的，我明白了! 我会帮你的.",
  },
  {
    avatar: "/images/rpg_female.png",
    content: "嫦娥：好的。 谢谢你!",
  },
];

// 男孩的精灵图
const boyData = {
  length: 4, // 精灵图的长度
  url: "/images/boy.png", // 图片的路径
  width: 37.5, // 图片的宽度
  height: 72.5, // 图片的高度
  endPosition: {
    left: "300px",
    bottom: "154px",
  },
};

// 女孩的精灵图
const girlData = {
  length: 7, // 精灵图的长度
  url: "/images/girl.png", // 图片的路径
  width: 37.5, // 图片的宽度
  height: 72.5, // 图片的高度
  scale: 0.2,
  endPosition: {
    bottom: "325px",
    right: "140px",
  },
};

export default defineComponent({
  name: "App",
  setup() {
    let isShow = ref(false); // 对话框窗口开关
    let typedShow = ref(false); // 咒语窗口开关
    let girlAction = ref(false); // 女孩动作开关, 导演喊一句action后，演员开始演绎
    const boy = reactive(boyData);
    const girl = reactive(girlData);
    const dialogueArr = reactive(dialogueContent);
    // 男孩移动动画结束
    function boyMoveEnd() {
      isShow.value = true;
    }
    // 完成输入咒语
    function completeOver() {
      girlAction.value = true;
    }
    function girlMoveEnd() {}
    // 对话窗口关闭
    function dialogClose() {
      // 对话框关闭后，弹出咒语的窗口，二牛输入咒语后，嫦娥开始飞仙动作
      typedShow.value = true;
    }
    return {
      dialogueArr,
      boy,
      girl,
      isShow,
      boyMoveEnd,
      girlMoveEnd,
      girlAction,
      dialogClose,
      typedShow,
      completeOver,
    };
  },
  components: {
    DialogBox,
    Sprite,
    Typed,
  },
});
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.bg {
  width: 720.5px;
  height: 450.5px;
  background: url("/images/ZhongQ.png") #829ada;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .sun {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 120px;
    top: 50px;
    background: url("/images/sun.png");
    background-size: cover;
  }
  .boy {
    position: absolute;
    bottom: 90px;
    left: 10px;
    transform: translate3d(0, 0, 0, 0);
    transition: all 4s cubic-bezier(0.4, 1.07, 0.73, 0.72);
  }
  .girl {
    position: absolute;
    bottom: 155px;
    right: 300px;
    transform: translate3d(0, 0, 0, 0);
    transition: all 4s cubic-bezier(0.4, 1.07, 0.73, 0.72);
  }
}
</style>
